<template>
  <!--登录主体部分-->
  <div class="loginBody"
       v-loading="loading"
       element-loading-text="正在登入..."
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.2)">

    <!--登录表单容器-->
    <el-form ref="loginFormRef"
             :rules="rules"
             :model="loginForm"
             class="loginContainer">

      <!--表单标题-->
      <p class="title" :style="{color : theme}">Autumn Office</p>

      <!--表单描述-->
      <p class="desc">越 秀 区 最 具 影 响 力 的 设 计 规 范 之 一</p>

      <el-form-item prop="username">
        <el-input v-model.trim="loginForm.username" clearable auto-complete="false" placeholder="账号" maxlength="20" @keyup.enter.native="submitLogin" prefix-icon="el-icon-user-solid"/>
      </el-form-item>

      <el-form-item prop="password">
        <el-input type="password" v-model.trim="loginForm.password" clearable auto-complete="false" placeholder="密码" maxlength="20" @keyup.enter.native="submitLogin" prefix-icon="el-icon-lock"/>
      </el-form-item>

      <el-form-item prop="code">
        <div style="display: flex;justify-content: space-between">
          <el-input v-model.trim="loginForm.code" auto-complete="false" @keyup.enter.native="submitLogin"  clearable laceholder="验证码" maxlength="4" style="width: 220px;" prefix-icon="el-icon-picture"/>
          <div class="captchaContent">
            <div v-if="captchaLoad">
              <i class="el-icon-loading" style="margin-right: 5px"/><span>loading...</span>
            </div>
            <img v-else :src="captchaUrl" @click="getCaptcha" title="点击更换">
          </div>
        </div>
      </el-form-item>

      <el-form-item>
        <el-checkbox v-model="loginForm.remember" :style="{color: theme}">记住我</el-checkbox>
        <span :style="{color: theme, 'float': 'right'}">
            <span style="cursor: pointer">忘记密码</span>
            <span>&emsp;|&emsp;</span>
            <span @click="changeLogin" style="cursor: pointer">短信验证登录</span>
          </span>
      </el-form-item>

      <el-form-item>
        <!--提交按钮-->
        <el-button type="primary" class="submitBtn" @click="submitLogin" :style="{backgroundColor: theme}">
          <span v-if="!loading">登&emsp;入</span>
          <span v-else><i class="el-icon-loading" style="margin-right: 10px"/>登&emsp;入&emsp;中&emsp;...</span>
        </el-button>
      </el-form-item>

      <!--其他登入方式-->
      <el-form-item>
        <ul class="otherLogin">
          <li title="使用GitHub账号登录" style="background-color: #252A2F"><i class="fa fa-github"/></li>
          <li title="使用QQ账号登录" style="background-color: #00B0FB"><i class="fa fa-qq"/></li>
          <li title="使用微信账号登录" style="background-color: #46D800"><i class="fa fa-wechat"/></li>
          <li title="使用FaceBook账号登录" style="background-color: #1278F3"><i class="fa fa-facebook-official"/></li>
          <!--<li title="使用Windows账号登录" style="background-color: #0078D7"><i class="fa fa-windows"/></li>-->
          <li title="其他登录方式" :style="{backgroundColor: theme}">
            <i class="el-icon-more" slot="reference"/>
          </li>
        </ul>
      </el-form-item>
    </el-form>

    <!--底部内容-->
    <p class="footer_content" :style="{color: theme}">
        <span>
          Copyright © 2021
        </span>
      <span>
          <i class="fa fa-github"/>
          <a href="https://gitee.com/mornd/yeb_view" target="_blank" :style="{color: theme}">GitHub</a>
        </span>
      <span>
          <i class="fa fa-qq"/>
          1152229579
      </span>
      <span>
          <i class="fa fa-history"/>
          version:1.1
      </span>
    </p>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data(){
      return {
        //主题颜色
        theme: '#409EFF',
        //验证码加载遮罩
        captchaLoad: true,
        //验证码url
        captchaUrl: undefined,
        //表单登录属性
        loginForm: {
          username: 'tom',
          password: '000',
          code: '',
          remember: false,
          uuid: ''
        },
        //整个页面加载
        loading: false,
        //非空验证 与prop属性对应
        rules:{
          username:[{required:true,message:"请输入账号",trigger:"change"}],
          password:[{required:true,message:"请输入密码",trigger:"change"}],
          code:[{required:true,message:"请输入验证码",trigger:"change"}]
        },
        loginMethod: {
          accountLogin: {
            title: '账号登录',
            ref: 'loginFormRef',
            showPwdInput: true,
            showForgetPwd: true,
            model: {
              username: 'tom',
              password: '000',
              code: '',
              remember: false,
              uuid: ''
            },
            accountPlaceholder: '账号',
            passwordPlaceholder: '密码',
            rules:{
              username:[{required:true,message:"请输入用户名",trigger:"change"}],
              password:[{required:true,message:"请输入密码",trigger:"change"}],
              code:[{required:true,message:"请输入验证码",trigger:"change"}]
            },
          },
          msgLogin: {

          }
        }
      }
    },
    created(){
      this.getCaptcha();
    },
    methods:{
      //获取验证码
      getCaptcha(){
        this.captchaLoad = true;
        this.$api.getRequest('/captcha?time=' + new Date()).then(res => {
          if(res.success){
            this.captchaUrl = res.data.captcha;
            this.loginForm.uuid = res.data.uuid;
            this.captchaLoad = false;
          }
        })
      },

      //表单提交
      submitLogin(){
        //与ref属性对应
        this.$refs['loginFormRef'].validate((valid) => {
          if (valid) {
            //加载动画
            this.loading = true;
            //封装的post请求
            this.$api.postRequest('/userLogin', this.loginForm).then(res => {
              if(res.success){
                //存储用户token
                const tokenStr = res.data.tokenHead + res.data.token;
                this.$store.commit('setToken', tokenStr);
                this.$router.replace({path: '/'});

                //跳转页面
                /*let path = this.$route.query.redirect;
                this.$router.replace((path == '/' || path == undefined) ? '/home' : path);*!/*/
              }else{
                //登录失败
                this.loginForm.code = '';
                this.getCaptcha();
                this.loading = false;
              }
            })
            //表单验证不通过
          } else {
            this.$message.warning('请输入必填项');
            return false;
          }
        });
      },

      changeLogin(){
      }
    }
  }
</script>

<style lang="less" scoped>
  /*登录主体部分*/
  .loginBody{
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background: #F5F5F5 url("../../assets/images/background/background2.svg");
    background-size: cover;
  }

  /*登录主容器*/
  .loginContainer{
    background-clip: padding-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 350px;
  }

  /*登录标题*/
  .title{
    margin: 0 auto;
    text-align: center;
    font-size: 35px;
    font-weight: bold;
  }

  /*描述*/
  .desc{
    text-align: center;
    color: grey;
    font-size: 14px;
    line-height: 60px;
  }

  /*图片验证码区域*/
  .captchaContent{
    width: 115px;
    height: 40px;
    cursor: pointer;
    color: #808080;
    text-align: center;
  }

  /*登录按钮*/
  .submitBtn{
    border: none;
    width: 100%;
    font-size: 15px;
    font-weight: bold;
  }

  /*其他登录方式*/
  .otherLogin{
    /*平均分布*/
    display:flex;
    justify-content:space-between;
    margin: 10px 0 0 0;
    padding: 0;
    list-style: none;
    width: 100%;
  }
  .otherLogin li{
    line-height: 35px;
    font-size: 20px;
    text-align: center;
    color: #FFF;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
  }

  /*脚部内容*/
  .footer_content{
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 14px;
  }

  /*底部a标签*/
  .footer_content a{
    font-size: 14px;
    margin-left: 5px;
    text-decoration: none;
  }
  .footer_content a:hover{
    text-decoration: underline;
  }
  .footer_content span{
    margin-right: 20px;
  }
</style>
